{include file="public/header-static"/} {include file="public/sidebar"/}
<div id="main">
    {include file="public/header"/}
    <div class="main-content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="row">

                        <div class="col-md-12">
                            <div class="card bor">
                                <div class="card-dth" style="height: 100%;">

                                    <div class="d-cnter" style="display: flex;">
                                        <div class="item">
                                            <div class="user-name" style="text-align: left;">
                                                社群礼包数据
                                            </div>
                                            <canvas id="packData"></canvas>
                                        </div>
                                        <div class="areaItem">
                                            <input id="datas" type="hidden" value="{$packArea.datas}" name="datas">
                                            <div class="user-name" style="text-align: left;">
                                                投放城市数据
                                            </div>
                                            <div class="card-dth positionBox">

                                                {if $packArea.lastData}
                                                    <div class="pullDown" onclick="pullDown1()"></div>
                                                    <div class="pullDownText1 pullDownText" onclick="pullDown1()">展开全部</div>
                                                {/if}

                                                <div class="" style="display: flex;justify-content: center;">
                                                    <canvas id="cityData"></canvas>

                                                </div>

                                                <div id="dataArr1" style="margin: 10px; padding-top: 15px;visibility: hidden;height: 0;">
                                                    <div class="dataRow1">

                                                        {volist name="packArea.lastData" id="vo"}
                                                            <span>
                                                                <p>{$vo.name}</p>
                                                                <p>{$vo.nums}</p>
                                                            </span>
                                                       {/volist}

                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="item">
                                            <div class="user-name" style="text-align: left;">
                                                用户身份数据
                                            </div>
                                            <div class="dataList" style="padding-left: 15px;">
                                                <div class="dataRow">

                                                    {volist name="identityPackData" id="vo"}
                                                    <span>
                                                        <p><i class="icon" style="background-color: {$vo.colors};"></i>{$vo.name}</p>
                                                        <p>{$vo.nums}</p>
                                                    </span>
                                                   {/volist}

                                                </div>
                                            </div>


                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>

                </div>
            </div>

            <div class="list">
                <!--                <div class="uname">社群列表</div>-->
                <div class="app-action">
                    <div class="action-right">
                        <div class="input-group">
                            <input type="text" name="keywords" id="keywords" autofocus="autofocus" value="{$Request.get.keywords}" class="form-control" placeholder="昵称" aria-describedby="button-addon1">
                            <div class="input-group-append">
                                <button class="btn btn-outline-light" type="submit" id="button-addon1">
                                    <i data-feather="search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="app-block">
                    <div class="app-content">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card">
                                    <table id="linkstable" lay-filter="linkstable"></table>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
    {include file="public/footer"/}
</div>
<script src="__STATIC__/vendors/charts/chartjs/chart.min.js"></script>
<script src="__STATIC__/vendors/charts/apex/apexcharts.min.js"></script>
<script src="__STATIC__/vendors/circle-progress/circle-progress.min.js"></script>
<script src="__STATIC__/assets/js/examples/dashboard.js"></script>
<script src="__STATIC__/assets/js/examples/echarts.js"></script>
<script src="__STATIC__/assets/js/custom.js"></script>
<script type="text/html" id="barDemo">
    <button onclick="see({{d.id}})" class="btn btn-sm btn-outline-secondary">详情</button>
</script>
<script>
    function pullDown1() {
        if ($('.pullDownText1').text() == '收起') {

            $('#dataArr1').css('visibility', 'hidden')
            $('#dataArr1').css('height', '0')

            $('.pullDownText1').text('展开全部')
        } else if ($('.pullDownText1').text() == '展开全部') {

            $('#dataArr1').css('visibility', 'visible')
            $('#dataArr1').css('height', '100%')

            $('.pullDownText1').text('收起')
        }
    };
    window.onresize = function() {
        resizeMyChartContainer1()
        myChart1.resize();
        resizeMyChartContainer2();
        myChart2.resize();
        // resizeMyChartContainer3();
        // myChart3.resize();
        // resizeMyChartContainer4();
        // myChart4.resize();
        // resizeMyChartContainer5();
        // myChart5.resize();
    }
</script>
<script>
    function see(id) {
        window.location.href = '{:url("/pack/packShow")}?id=' + id;
    }

    // 投放城市数据
    var str = $('#datas').val().split(';');
    var arr = [];
    for (var i in str) {
        console.log(str[i])
            // // 转换成对象
        if (str[i]) {
            var obj = eval('(' + str[i] + ')');
            console.log(obj);
            arr.push(obj)
        }
    }

    let emptyBool = false;
    if (arr.length === 0) {
        emptyBool = true
        let emptyObj = {
            value: 0,
            itemStyle: {
                normal: {
                    color: '#e0e0e0'
                }
            },
        }
        arr.push(emptyObj)
    }
    console.log(111);
    console.log(arr);
    var chartDom2 = document.getElementById('cityData');
    var resizeMyChartContainer2 = function() {
        let domWidth = $('.d-cnter').width();
        chartDom2.style.width = (domWidth / 10 * 4) + 'px'
        chartDom2.style.height = 400 - 50 + 'px'
    }
    resizeMyChartContainer2()
    var myChart2 = echarts.init(chartDom2);
    var option2 = {
        title: '',
        tooltip: {
            trigger: 'item'
        },
        color: ['#f24f21', '#5c78ff', '#fd6263', '#4e1ef2', '#f8ab18'], //手动设置每个图例的颜色
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: '48%',
                top: '40%',
                style: {
                    //value当前进度
                    text: "{$packArea.totalArea}",
                    textAlign: 'center',
                    fill: '#19191A',
                    fontSize: 34,
                    fontWeight: 'bold'
                }
            },
            //第二行文字
            //内容 + 位置
            {
                type: 'text',
                left: '45%',
                top: '56%',
                style: {
                    //maxValue进度条最大值
                    text: '热门地区',
                    textAlign: 'center',
                    fill: '#19191A',
                    fontSize: 16
                }
            }
        ],
        series: [ //系列列表
            {
                name: '设备状态', //系列名称
                type: 'pie', //类型 pie表示饼图
                radius: ['55%', '65%'], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                center: ['50%', '50%'], //控制饼图位置
                itemStyle: { //图形样式
                    normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                        label: { //饼图图形上的文本标签
                            show: false //平常不显示
                        },
                        labelLine: { //标签的视觉引导线样式
                            show: false //平常不显示
                        }
                    },

                },
                label: {
                    normal: {
                        show: true, //展示
                        position: 'outside', // outside表示文本显示位置为外部
                        textStyle: {
                            // color: ['#f24f21',  '#5c78ff',  '#fd6263', '#4e1ef2','#f8ab18'],
                        }
                    },
                    emphasis: { //文本样式
                        show: true, //展示
                        textStyle: { //文本样式
                            fontSize: '14',
                            fontWeight: '600',
                        }
                    }
                },
                labelLine: { //引导线设置
                    normal: {
                        show: emptyBool ? false : true, //引导线显示
                        length: 40,
                    }
                },
                data: arr,
            }, {

            }
        ]
    };
    myChart2.setOption(option2);
    myChart2.resize();





    // 社群礼包数据
    var chartDom1 = document.getElementById('packData');
    var resizeMyChartContainer1 = function() {
        let domWidth = $('.d-cnter').width();
        chartDom1.style.width = (domWidth / 10 * 3) < 260 ? 260 : (domWidth / 10 * 3) + 'px'
            // console.log(chartDom1.style.width);
        chartDom1.style.height = 400 - 20 + 'px'
    }
    resizeMyChartContainer1()
    var myChart1 = echarts.init(chartDom1);
    var option1 = {
        title: '',
        tooltip: {
            trigger: 'item',
        },
        legend: {
            orient: 'vertical',
            top: '25%',
            left: '0%',
            // y:'center',
            itemWidth: 12,
            itemHeight: 12,
            itemGap: 25,
            textStyle: {
                color: '#000',
                fontWeight: 'bold',
                fontSize: 18,
                width: 20,
                height: 20,
                rich: {
                    a: {
                        color: '#999',
                        lineHeight: 20,
                    },
                    b: {
                        fontSize: 16
                    }
                }
            }
        },
        //    color: ['#5B78FFFF',  '#E6A500FF'],  //手动设置每个图例的颜色
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: '29%',
                top: '40%',
                style: {
                    //value当前进度
                    //    text: "9998",
                    textAlign: 'center',
                    fill: '#19191A',
                    fontSize: 34,
                    fontWeight: 'bold'
                }
            },
            //第二行文字
            //内容 + 位置
            {
                type: 'text',
                left: '34%',
                top: '56%',
                style: {
                    //maxValue进度条最大值
                    //    text: '总收入',
                    textAlign: 'center',
                    fill: '#19191A',
                    fontSize: 16
                }
            }
        ],
        series: [ //系列列表
            {
                type: 'pie',
                radius: ['60%', '50%'], //['外圆大小', '内圆大小']
                center: ['65%', '50%'], //圆心位置['左右'， '上下']
                hoverAnimation: false, //取消鼠标悬停动画
                animationEasing: 'cubicOut', //设置动画缓动效果
                //取消显示饼图自带数据线条
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                label: {
                    show: false,
                    position: 'left'
                },
                //增加阴影效果
                itemStyle: {
                    normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                        label: { //饼图图形上的文本标签
                            show: false //平常不显示
                        },
                        labelLine: { //标签的视觉引导线样式
                            show: false //平常不显示
                        }
                    },
                },
                data: [{
                    value: "{$countPack}",
                    itemStyle: {
                        normal: {
                            color: '#5B78FFFF'
                        }
                    },
                    name: '{a|下单总数}\n{$countPack} {b|人}',
                }, ]
            }, {
                type: 'pie',
                radius: ['40%', '30%'], //['外圆大小', '内圆大小']
                center: ['65%', '50%'], //圆心位置['左右'， '上下']
                hoverAnimation: false, //取消鼠标悬停动画
                animationEasing: 'cubicOut', //设置动画缓动效果
                //取消显示饼图自带数据线条
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                label: {
                    show: false,
                    position: 'left'
                },
                //增加阴影效果
                itemStyle: {
                    normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                        label: { //饼图图形上的文本标签
                            show: false //平常不显示
                        },
                        labelLine: { //标签的视觉引导线样式
                            show: false //平常不显示
                        }
                    },
                },
                data: [
                    //(maxValue进度条最大值 - value当前进度) + 颜色
                    {
                        value: "{$countPackMonth}",
                        itemStyle: {
                            normal: {
                                color: '#FE66D8FF'
                            }
                        },
                        name: '{a|本月下单总数}\n{$countPackMonth} {b|人}'
                    },
                    //value当前进度 + 颜色
                    {
                        value: "{$countPackWeek}",
                        itemStyle: {
                            normal: {
                                color: '#E6A500FF'
                            }
                        },
                        name: '{a|本周下单总数}\n{$countPackWeek} {b|人}'
                    },
                ]
            },

        ]

    };
    myChart1.setOption(option1);
    myChart1.resize();

    // layui插件
    layui.use('table', function() {
        var table = layui.table,
            form = layui.form;
        // 表格初始化
        table.render({
            elem: '#linkstable',
            skin: 'line' //行边框风格
                ,
            even: true //开启隔行背景
                ,
            url: '{:url("/pack/index")}',
            method: 'post',
            page: true //开启分页
                ,
            cols: [
                [{
                    field: 'ids',
                    title: '序号/用户ID'
                }, {
                    field: 'nickname_data',
                    title: '昵称/身份',
                    width: 160
                }, {
                    field: 'nums_data',
                    title: '购买/推送次数'
                }, {
                    field: 'user_type',
                    title: '城市/角色'
                }, {
                    field: 'time_data',
                    title: '创建/到期时间'
                }, {
                    field: 'rightbtn',
                    title: '操作',
                    align: 'center',
                    toolbar: '#barDemo'
                }]
            ],
            done: function(res) {
                var element = $('td[data-field="rightbtn"]').children('.layui-table-cell');
                element.css('overflow', 'visible');
                element.children('.dropdown-menu').css('min-width', 'auto');
            },
            parseData: function(res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.data.count,
                    "data": res.data.list
                };
            }
        });

        // 搜索
        $('#button-addon1').on('click', function() {
            var keywords = $("#keywords").val();
            table.reload('linkstable', {
                url: '{:url("/pack/index")}',
                where: {
                    keywords: keywords // 搜索参数
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });

    });
</script>
<style>
    .icon {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: pink;
        position: absolute;
        left: -10%;
        top: 10%;
    }
    
    .dataList {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 360px;
        padding-left: 20px;
    }
    
    .d-cnter {
        display: flex;
        /* align-items: center; */
        width: 100%;
        /* height: 100%; */
    }
    
    .d-cnter .item {
        width: 30%;
        height: 100%;
    }
    
    .d-cnter .item:nth-child(3) {
        /* background-color: #007bff; */
        height: 100%;
    }
    
    .d-cnter .areaItem {
        width: 40%;
        /* height: 100%; */
    }
    
    .dataRow1 {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;
        width: 100%;
    }
    
    .dataRow1 span {
        display: block;
        width: 20%;
    }
    
    .dataRow {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }
    
    .dataRow span {
        width: 50%;
        margin: 10px 0;
        position: relative;
    }
    
    .positionBox {
        position: relative;
    }
    
    .positionBox .pullDown {
        position: absolute;
        right: 2%;
        bottom: 2%;
        transform: rotate(180deg);
        cursor: pointer;
    }
    
    .positionBox .pullDownText {
        position: absolute;
        right: 6%;
        bottom: 3.5%;
        color: #5C5E66FF;
        cursor: pointer;
    }
    
    .pullDown:before,
    .pullDown:after {
        position: absolute;
        content: '';
        border-top: 10px transparent dashed;
        border-left: 10px transparent dashed;
        border-right: 10px transparent dashed;
        border-bottom: 10px #fff solid;
    }
    
    .pullDown:before {
        border-bottom: 10px #898A8FFF solid;
    }
    
    .pullDown:after {
        top: 2px;
        /*覆盖并错开1px*/
        border-bottom: 10px #fff solid;
    }
    
    .add {
        background: rgba(63, 110, 255, 0) !important;
        border: 1px solid #3F6EFF;
        border-radius: 6px;
        color: #3F6EFF !important;
    }
    
    .sel-dfx {
        display: flex;
        justify-content: space-between;
        margin: auto;
    }
    
    .sel-mat-top {
        margin-top: 40px;
        margin-bottom: 40px;
    }
    
    .avt {
        background: #3F6EFF !important;
        color: #FFFFFF !important;
    }
    
    .sel-bottom {
        background: #F0F0F0;
        border-radius: 3px;
        cursor: pointer;
        color: #999999;
        line-height: 32px;
        height: 32px;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .sel-bottom:active {
        background: #3377FF;
    }
    
    .card-dth {
        padding: 8px;
    }
    
    .user-name {
        font-size: 16px;
        font-family: 'AliM';
        font-weight: 500;
        color: #0E1525;
        margin-left: 10px;
        text-align: center;
    }
    
    .user {
        display: flex;
        justify-content: space-between;
    }
    
    .user {
        width: 96%;
        margin: auto;
        color: #0E1525;
    }
    
    .bg-txt {
        display: flex;
        margin-top: 5px;
    }
    
    .str {
        font-size: 12px;
        margin-left: 3px;
        color: #999999;
    }
    
    .d-fix {
        display: flex;
        justify-content: space-between;
        padding-top: 25px;
        padding-bottom: 20px;
    }
    
    .rig-img img {
        width: 9rem;
        height: 9rem;
    }
    
    .j {
        background: #5B78FF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }
    
    .bz {
        background: #22b9ff;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }
    
    .dy {
        background: #28a745;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }
    
    .jn {
        background: #F74AFF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }
    
    .bg-str {
        font-family: 'AliM';
        text-align: center;
    }
    
    .u-rig {
        display: flex;
        justify-content: space-between;
        width: 92%;
        margin: auto;
        padding-top: 10px;
        padding-bottom: 30px;
    }
    
    .txt-cen {
        text-align: center;
    }
    
    .list {
        background: white;
        /*height: 100vh;*/
        padding: 20px;
        border-radius: 5px;
    }
    
    .uname {
        font-size: 18px;
        font-family: 'AliM';
        margin-bottom: 15px;
    }
    
    .fix-d {
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
    }
    
    .d-th {
        padding-left: 10px;
        text-align: center;
    }
    
    .numer {
        font-size: 21px;
        font-family: 'AliM';
        font-weight: 600;
    }
    
    .t {
        color: #576AFB;
    }
    
    .d-str {
        font-size: 12px;
        font-family: 'AliM';
        margin-top: 5px;
    }
    
    .d-add {
        font-size: 11px;
        color: #999999;
        margin-top: 5px;
    }
    
    .b {
        color: #FF6739;
    }
    
    .w {
        color: #00A0FF;
    }
    
    .keword {
        display: flex;
    }
    
    .key-input {
        padding-left: 8px;
        border: 1px solid #e2d7d7;
        border-radius: 6px;
        width: 200px;
    }
    
    .key-bottom {
        margin-left: 10px;
        background: #007bff;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 34px;
        line-height: 30px;
        color: white;
        height: 30px;
        margin-top: 5px;
        cursor: pointer
    }
    
    .key-bottom:active {
        background: #71a2d8;
    }
</style>
</body>

</html>